﻿<%@ Page Title="" Language="C#" MasterPageFile="~/styles/MasterPage.master" AutoEventWireup="true"
    CodeFile="VideoClipPlay.aspx.cs" Inherits="VideoClipPlay" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <link rel="stylesheet" type="text/css" href="plugin/jPlayer.2.1.0/css/prettify-jPlayer.css" />
    <link rel="stylesheet" type="text/css" href="plugin/jPlayer.2.1.0/css/style.css" />
    <script type="text/javascript" src="plugin/jPlayer.2.1.0/jquery.jplayer.min.js"></script>
    <script type="text/javascript" src="plugin/jPlayer.2.1.0/jquery.jplayer.inspector.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#jquery_jplayer_1").jPlayer({
                ready: function () {
                    $(this).jPlayer("setMedia", {
                        m4v: "<%= FilePath%>",
                        poster: "<%= Poster%>"
                    }).jPlayer("play");
                },
                supplied: "m4v",
                swfPath: "jPlayer/js",
                size: {
                    width: "640px",
                    height: "360px",
                    cssClass: "jp-video-360p"
                }
            });
        });
    </script>
    <script type="text/javascript">
        (function () {
            var s = document.createElement('script'), t = document.getElementsByTagName('script')[0];
            s.type = 'text/javascript';
            s.async = true;
            s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto';
            t.parentNode.insertBefore(s, t);
        })();
    </script>
    <script type="text/javascript">
        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-3557377-9']);
        _gaq.push(['_trackPageview']);

        (function () {
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentHead" runat="Server">
    <h3 id="titleDetails" class="titleDetails" runat="server">
    </h3>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentMain" runat="Server">
    <div id="jp_container_1" class="jp-video jp-video-360p">
        <div class="jp-type-single">
            <div id="jquery_jplayer_1" class="jp-jplayer" style="width: 640px; height: 360px;">
                <img id="jp_poster_0" style="width: 640px; height: 360px; display: none;" src="http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"><video
                    id="jp_video_0" preload="metadata" style="width: 640px; height: 360px;" src="http://www.jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm"></video></div>
            <div class="jp-gui" style="">
                <div class="jp-video-play" style="display: none;">
                    <a href="javascript:;" class="jp-video-play-icon" tabindex="1">play</a>
                </div>
                <div class="jp-interface-video">
                    <div class="jp-progress">
                        <div class="jp-seek-bar" style="width: 100%;">
                            <div class="jp-play-bar" style="width: 0%;">
                            </div>
                        </div>
                    </div>
                    <div class="jp-current-time">
                        00:00</div>
                    <div class="jp-duration">
                        00:33</div>
                    <div class="jp-controls-holder">
                        <ul class="jp-controls">
                            <li><a href="javascript:;" class="jp-play" tabindex="1" style="display: block;">play</a></li>
                            <li><a href="javascript:;" class="jp-pause" tabindex="1" style="display: none;">pause</a></li>
                            <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
                            <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute" style="">mute</a></li>
                            <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute" style="display: none;">
                                unmute</a></li>
                            <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume"
                                style="">max volume</a></li>
                        </ul>
                        <div class="jp-volume-bar" style="">
                            <div class="jp-volume-bar-value" style="width: 80%;">
                            </div>
                        </div>
                        <ul class="jp-toggles">
                            <li><a href="javascript:;" class="jp-full-screen" tabindex="1" title="full screen"
                                style="">full screen</a></li>
                            <li><a href="javascript:;" class="jp-restore-screen" tabindex="1" title="restore screen"
                                style="display: none;">restore screen</a></li>
                            <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat" style="">repeat</a></li>
                            <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off"
                                style="display: none;">repeat off</a></li>
                        </ul>
                    </div>
                    <div class="jp-title" style="background:#2C2C2C;">
                        <ul>
                            <li>
                            <span id="musicTittle" runat="server" class="text1"></span></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div style="padding-left:28px;">
        <ul class="musicButtonGroup">
            <li><a class="musicButton" href="<%= FilePath%>">Download</a></li>
            <li><a class="musicButton" href="#">Add To Playlist</a></li>
            <li><a class="musicButton" href="#">Share</a></li>
            <li><a class="musicButton" href="#">Services</a></li>
            <li><a class="musicButton" href="#">Like</a></li>
        </ul>
    </div>
    <h3 class="text3" style="margin-left: 10px">
        Information</h3>
    <div class="musicDetails">
        <div class="musicCover">
            <a id="artistLnk" runat="server"><img id="artistCover" runat="server" width="125" height="125" /></a>
        </div>
        <div class="musicDescription">
            <span class="text2bold">Airtist : </span><a id="artistname" class="lnkhighlight"
                runat="server"></a></span>
            <br />
            <span class="text2bold">Description : </span><span id="artistdescription" class="text1"
                runat="server"></span>
        </div>
    </div>
    <div class="artistAlbumView">
        <p class="text3">
            Albums :</p>
        <asp:Repeater ID="Rpt_AlbumArtist" runat="server">
            <HeaderTemplate>
                <ul>
            </HeaderTemplate>
            <ItemTemplate>
                <li><a href="TrackList.aspx?alid=<%# Eval("AlbumID")%>">
                    <div class="albumCover">
                        <img src="<%# Eval("AlbumCover")%>" alt="" width="125" height="125" />
                        <p class="albuminsidecover">
                            <%# Eval("AlbumName")%></p>
                    </div>
                </a></li>
            </ItemTemplate>
            <FooterTemplate>
                </ul>
            </FooterTemplate>
        </asp:Repeater>
    </div>
</asp:Content>
